<template>
	<view class="home">
		<!-- 搜索 -->
		<view class="nav" @click="tiaos()">
			<u-search class="search" placeholder="请输入搜索关键字" shape="query" inputAlign="center" v-model="keyword"
				animation="false">
			</u-search>
		</view>
		<!-- 轮播图 -->
		<view class="swiper">
			<swiper class="swiper-item" indicator-dots="true" autoplay="true" interval="2000" duration="500">
				<block v-for="(item, index) in swiperdata" :key="index">
					<swiper-item>
						<image :src="item.src" mode=""></image>
					</swiper-item>
				</block>
			</swiper>
		</view>
		<!-- 导航 -->
		<view class="catitems">
			<view v-for="(item, index) in catitemdata" :key="item.course_id" @click="tiaocat(index)">
				<image :src="item.src"></image>
				<span>{{item.name}}</span>
			</view>
		</view>
		<!-- 优惠券 -->
		<view class="coupon-wrapper">
			<scroll-view class="scroll-view_H" scroll-x="true" bindscroll="scroll" style="width: 100%">
				<view id="demo1" class="scroll-view-item_H demo-text-1" v-for="item in coupondata" :key="item.id">
					<view class="box">
						<view :class="item.isgetcoupon==true? 'iii1' :'iii'">
							<span>￥{{item.price}}</span> <br>
							<span>{{item.value.title}}</span>
						</view>
						<view :class="item.isgetcoupon==true?'right1':'right'" @click="lq(item)">领取</view>
					</view>
				</view>
			</scroll-view>
		</view>
		<!-- 拼团 -->
		<view class="pt">拼团</view>
		<view class="coupon">
			<scroll-view class="scroll-view_H" scroll-x="true" bindscroll="scroll" style="width: 100%">
				<view id="demo1" class="scroll-view-item_H demo-text-1" v-for="item in groupdata" :key="item.id"
					@click="tiao1(item.group_id)">
					<view class="box">
						<view class="iii">
							<image :src="item.cover" mode=""></image>
							<template v-for="it in tabs">
								<view class="yin" v-if="it.type == item.type">{{it.tab}}</view>
							</template>

						</view>
						<view class="right">{{item.title}}</view>
						<view class="bo">
							￥{{item.t_price}}
							<span>￥{{item.price}} </span>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
		<!-- 最新列表 -->
		<view class="pt">最新列表
			<view class="right" @click="tiaolist()">
				查看更多
			</view>
		</view>
		<view class="new">
			<view class="box" v-for="item in newdata" :key="item.id" @click="tiao(item.id)">
				<view class="left">
					<image :src="item.cover" mode=""></image>
					<template v-for="it in tabs">
						<view class="yin" v-if="it.type == item.type">{{it.tab}}</view>
					</template>
				</view>
				<view class="right">
					<view class="top">{{item.title}}</view>
					<view class="bo">
						￥{{item.t_price}}
						<span>￥{{item.price}} </span>
					</view>

				</view>
			</view>
		</view>
		<!-- 图片 -->
		<view class="pic">
			<image :src="picdata" mode=""></image>
		</view>

		<u-toast ref="uToast"></u-toast>
		<u-cell-group title-bg-color="rgb(243, 244, 246)">
			<u-cell :titleStyle="{fontWeight: 500}" :title="item.title" v-for="(item, index) in list" :key="index"
				isLink :icon="item.iconUrl" @click="showToast(item)">
			</u-cell>
		</u-cell-group>
	</view>
</template>

<script>
	import {
		swiperList,
		couponList,
		groupList,
		clickcouList
	} from '../api/api.js';
	export default {
		data() {
			return {
				tabs: [{
						type: "media",
						tab: "图文"
					}, {
						type: "audio",
						tab: "音频"
					},
					{
						type: "video",
						tab: "视频"
					},
					{
						type: "column",
						tab: "专栏"
					},
				],

				query: "", //搜索关键词
				swiperdata: [], // 轮播图数据
				catitemdata: [], //导航数据
				coupondata: [], //优惠券数据
				groupdata: [], //拼团数据
				newdata: [], //最近更新数据
				picdata: "" //图片
			};
		},
		// 事件处理函数
		onLoad() {
			this.getswiper()
			this.getcoupon()
			this.getgroup()
		},
		methods: {
			//领取优惠券
			async lq(item) {
				const res = await clickcouList({
					coupon_id: item.id
				})
				if (res.data.msg == "fail") {
					this.$refs.uToast.show({
						type: 'default',
						message: res.data.data,
					})
				}
				if (res.data.msg == "ok") {
					this.$refs.uToast.show({
						type: 'default',
						message: res.data.data,
					})
					item.isgetcoupon = true
				}

				console.log("22", res)
				// console.log("id", id)
			},
			//跳转电子书
			tiaocat(index) {
				if (index == 0) {
					uni.navigateTo({
						url: "../webview/webview"
					})
				}
				if (index == 6) {
					uni.navigateTo({
						url: "../book-list/book-list"
					})
				}
				if (index == 1) {
					uni.navigateTo({
						url: "../test-list/test-list"
					})
				}
				if (index == 7) {
					uni.navigateTo({
						url: "../bbs/bbs"
					})
				}
			},

			//跳转list
			tiaolist() {
				uni.navigateTo({
					url: "../list/list"
				})
			},
			//跳转搜索
			tiaos() {
				uni.navigateTo({
					url: "../searchList/searchList"
				})
			},
			//跳转更多
			tiao1(gid) {
				uni.navigateTo({
					url: `../detail1/detail1?id=${gid}`
				})
			},
			//跳转详情
			tiao(id) {
				uni.navigateTo({
					url: `../detail/detail?id=${id}`
				})
			},
			//轮播图 导航 的渲染
			async getswiper() {
				const res = await swiperList();
				console.log(res, "首页数据");
				this.swiperdata = res.data.data[1].data
				// console.log("轮播图数据",this.swiperdata)
				this.catitemdata = res.data.data[2].data
				// console.log("导航数据", this.catitemdata);
				this.newdata = res.data.data[5].data
				// console.log("更多", this.newdata);
				this.picdata = res.data.data[6].data //图片
				// console.log(this.picdata, "图片");
			},
			//优惠券
			async getcoupon() {
				const res = await couponList();
				console.log(res, "优惠券");
				this.coupondata = res.data.data
			},
			//拼团数据
			async getgroup() {
				const res = await groupList();
				// console.log(res, "拼团");
				this.groupdata = res.data.data.rows
			},

		}
	};
</script>

<style lang="scss">
	* {
		box-sizing: border-box;
	}

	.home {
		width: 100%;
		height: 100%;

		.nav {
			width: 90%;
			height: 90rpx;
			background-color: white;
		}

		.swiper {
			width: 100%;
			height: 310rpx;

			// background-color: aqua;
			.swiper-item {
				width: 100%;
				height: 310rpx;

				image {
					width: 100%;
					border-radius: 10rpx;
					height: 100%;
				}
			}


		}

		.catitems {
			width: 100%;
			height: 310rpx;
			display: flex;
			flex-wrap: wrap;
			justify-content: space-around;
			align-items: center;
			// border-bottom: 15rpx solid #f5f5f3;

			view {
				width: 25%;
				display: flex;
				flex-direction: column;
				justify-content: space-around;
				align-items: center;

				span {
					font-size: 20rpx;
				}

				image {
					width: 71rpx;
					height: 71rpx;
				}
			}
		}

		//优惠券布局 dae0e5
		.coupon-wrapper {
			width: 100%;
			height: 140rpx;
			border-bottom: 15rpx solid #f5f5f3;

			.scroll-view_H {
				white-space: nowrap;
			}

			.scroll-view-item {
				height: 100%;
			}

			.scroll-view-item_H {
				display: inline-block;

				.box {
					display: flex;
					padding: 20rpx;
					margin-right: 10rpx;

					.iii1 {
						width: 454rpx;
						height: 109rpx;
						background-color: #dae0e5;
						display: flex;
						flex-direction: column;
						align-items: center;
						justify-content: center;
						color: white;
						font-size: 28rpx !important;
						border-right: 4px dashed white;
					}

					.right1 {
						width: 102rpx;
						height: 109rpx;
						display: flex;
						align-items: center;
						justify-content: center;
						background-color: #dae0e5;
						font-size: 25rpx !important;
						color: white;
					}

					.iii {
						width: 454rpx;
						height: 109rpx;
						background-color: #d39e00;
						display: flex;
						flex-direction: column;
						align-items: center;
						justify-content: center;
						color: white;
						font-size: 24rpx !important;
						border-right: 4px dashed white;

						.yin {
							width: 50rpx;
							height: 60rpx;
							background-color: #a9a5a0;
							color: white;
						}
					}

					.right {
						width: 102rpx;
						height: 109rpx;
						display: flex;
						align-items: center;
						justify-content: center;
						background-color: #ffc107;
						font-size: 25rpx !important;
						color: white;
					}
				}

				width: 600rpx;
				height: 119rpx;
			}
		}

		//拼团
		.pt {
			padding: 20rpx;
			width: 100%;
			height: 70rpx;
			font-size: 35rpx;
			font-weight: 700;
			display: flex;
			justify-content: space-between;
			align-items: center;
			box-sizing: border-box;

			.right {
				font-size: 30rpx;
				font-weight: 0;
				color: #a9a5a0;
			}
		}

		// 拼团布局
		.coupon {
			width: 100%;
			height: 310rpx;
			border-bottom: 15rpx solid #f5f5f3;

			.scroll-view_H {
				white-space: nowrap;
			}

			.scroll-view-item {
				height: 100%;
			}

			.scroll-view-item_H {
				display: inline-block;

				image {
					width: 338rpx;
					height: 184rpx;
				}

				.box {
					display: flex;
					flex-direction: column;
					align-items: flex-start;
					justify-content: space-around;
					padding: 20rpx;
					margin-right: 10rpx;

					.iii {
						position: relative;

						.yin {
							position: absolute;
							right: 10rpx;
							bottom: 10rpx;
							width: 70rpx;
							height: 40rpx;
							font-size: 26rpx;
							display: flex;
							justify-content: center;
							align-items: center;
							background-color: rgba(0, 0, 0, .4);
							color: white;
						}
					}

					.right {
						/* 1.溢出隐藏 */
						overflow: hidden;
						/* 2.用省略号来代替超出文本 */
						text-overflow: ellipsis;
						/* 3.设置盒子属性为-webkit-box  必须的 */
						display: -webkit-box;
						/* 4.-webkit-line-clamp 设置为2，表示超出2行的部分显示省略号，如果设置为3，那么就是超出3行部分显示省略号 */
						-webkit-line-clamp: 1;
						/* 5.字面意思：单词破坏：破坏英文单词的整体性，在英文单词还没有在一行完全展示时就换行  即一个单词可能会被分成两行展示 */
						word-break: break-all;
						/* 6.盒子实现多行显示的必要条件，文字是垂直展示，即文字是多行展示的情况下使用 */
						-webkit-box-orient: vertical;

						font-size: 32rpx;
					}

					.bo {
						color: red;
						font-size: 31rpx;

						span {
							font-size: 25rpx;
							color: grey;
						}
					}
				}

				width: 350rpx;
				height: 100%;
			}
		}

		//最近更新
		.new {
			width: 100%;

			.box {
				width: 100%;
				height: 214rpx;
				display: flex;
				padding: 20rpx;
				box-sizing: border-box;

				// justify-content: space-between;
				.left {
					width: 310rpx;
					height: 100%;
					display: flex;
					justify-content: center;
					align-items: center;
					margin-right: 5rpx;
					position: relative;

					.yin {
						position: absolute;
						right: 10rpx;
						bottom: 10rpx;
						width: 70rpx;
						height: 40rpx;
						font-size: 26rpx;
						display: flex;
						justify-content: center;
						align-items: center;
						background-color: rgba(0, 0, 0, .4);
						color: white;
					}

					image {
						width: 307rpx;
						height: 174rpx;
					}
				}

				.right {
					height: 100%;
					display: flex;
					flex-direction: column;
					justify-content: space-between;

					.top {
						/* 1.溢出隐藏 */
						overflow: hidden;
						/* 2.用省略号来代替超出文本 */
						text-overflow: ellipsis;
						/* 3.设置盒子属性为-webkit-box  必须的 */
						display: -webkit-box;
						/* 4.-webkit-line-clamp 设置为2，表示超出2行的部分显示省略号，如果设置为3，那么就是超出3行部分显示省略号 */
						-webkit-line-clamp: 1;
						/* 5.字面意思：单词破坏：破坏英文单词的整体性，在英文单词还没有在一行完全展示时就换行  即一个单词可能会被分成两行展示 */
						word-break: break-all;
						/* 6.盒子实现多行显示的必要条件，文字是垂直展示，即文字是多行展示的情况下使用 */
						-webkit-box-orient: vertical;

						font-size: 37rpx;
					}

					.bo {
						color: red;
						font-size: 33rpx;

						span {
							font-size: 24rpx;
							color: grey;
						}
					}

				}
			}
		}

		//图片
		.pic {
			width: 100%;
			height: 350rpx;

			image {
				height: 100%;
				width: 100%;
			}
		}
	}
</style>
